<template>
    <div id="app" class="mainContainer" style="display: flex;flex-direction: column" @mouseenter="onmouseenter"
        @mouseleave="onmouseleave" @mousewheel="onmousewheel" @mousemove="onmousemove" @mousedown="onmousedown"
        @mouseup="onmouseup">
        <!--    标题栏测试-->
        <mainTitle ref="mainTitle" :onlyTools="onlyTools" :panelValue="panelValue" @settingClickImp="settingClickImp"
            @romaClickImp="romaClickImp" @screenShot="$emit('screenShotAll')" @selectParkImp="selectParkImp"
            @desImp="showDes = true"></mainTitle>
        <!-- <ThematicMap v-if="mapMode === '2D'" /> -->
        <div class="floatLeftBg" v-show="showBottomPane"></div>
        <div class="floatRightBg" v-show="showBottomPane"></div>
        <!--    监控弹窗-->
        <el-dialog class="monitorDialog" :visible.sync="showMonitor" :show-close="false" v-if="showMonitor" append-to-body>
            <singlemonitor @showMonitor="changeMonitor" :playMonotorId="playMonotorId"
                style="position: absolute;left: 50%;top: 50%;z-index: 100;transform: translate(-50%,-50%)"></singlemonitor>
        </el-dialog>
        <!--安全应急点位弹窗-->
        <el-dialog class="monitorDialog" :visible.sync="meetMonitor" :show-close="false" v-if="meetMonitor" append-to-body>
            <detailsPage @meetMonitor = 'changeMeet' :meetId = 'meetId' @showViewViedo="meetMonitor=false" style="position: absolute;left: 50%;top: 50%;z-index: 100;transform: translate(-50%,-50%)"></detailsPage>
        </el-dialog>
        <!--扬尘，空气点位弹窗-->
        <el-dialog class="monitorDialog" :visible.sync="sensorMonitor" :show-close="false" v-if="sensorMonitor" append-to-body>
            <airPop @sensorMonitor = 'changeSensor' @showViewViedo="sensorMonitor=false" :sensorId = 'sensorId' style="position: absolute;left: 50%;top: 50%;z-index: 100;transform: translate(-50%,-50%)"></airPop>
        </el-dialog>
        <!--用电点位弹窗-->
        <el-dialog class="monitorDialog" :visible.sync="electricityMonitor" :show-close="false" v-if="electricityMonitor" append-to-body>
            <energyPop @electricityMonitor = 'electricityMonitor' :electricityId = 'electricityId' @showViewViedo="electricityMonitor=false" style="position: absolute;left: 50%;top: 50%;z-index: 100;transform: translate(-50%,-50%)"></energyPop>
        </el-dialog>
        <tool v-show="showTool" :panelValue1="panelValue1" @panelValue="panelValueImp"
            @closeBottomPane="showBottomPane = false" @showBottomPane="showBottomPane = true"
            @showCaltool="showToolCaltool">
        </tool>
        <caltool :mx="mx" :my="my" @caltoolClickImp="caltoolClickImp" @showMonitor="changeMonitor"
            @showSpatial="showSpatial" v-if="showCalTool"></caltool>
        <router-view />

        <!--    绘制区域-->
        <AreaForm :panelValue1="panelValue1" v-if="showAreaForm" @close="showAreaForm = false" />
        <MarkForm :panelValue1="panelValue1" v-if="showMarkForm" @close="showMarkForm = false" />
        <!--    漫游管理-->
        <romaForm :panelValue="panelValue" v-if="showRomaForm" @close="showRomaForm = false" />

        <!--    <div v-if="mapMode === '2D'" class="container-amap">-->
        <!--            <MapContainer />-->
        <!--    </div>-->
        <!--    底部栏-->
        <div class="bottomContainer" v-show="showBottomPane">
            <span :class="this.currentPos === 0 ? 'btn_s' : 'btn_n'" @click="jump(0)">综合态势</span>
            <span :class="this.currentPos === 1 ? 'btn_s' : 'btn_n'" @click="jump(1)">经济运行</span>
            <span :class="this.currentPos === 2 ? 'btn_s' : 'btn_n'" @click="jump(2)">能耗监测</span>
            <span :class="this.currentPos === 3 ? 'btn_s' : 'btn_n'" @click="jump(3)">环境监测</span>
            <span :class="this.currentPos === 4 ? 'btn_s' : 'btn_n'" @click="jump(4)">安全监管</span>
            <span :class="this.currentPos === 5 ? 'btn_s' : 'btn_n'" @click="jump(5)">交通物流</span>
            <span :class="this.currentPos === 6 ? 'btn_s' : 'btn_n'" @click="jump(6)">智慧党建</span>
            <span :class="this.currentPos === 7 ? 'btn_s' : 'btn_n'" @click="jump(7)">智慧招商</span>
        </div>
        <!--    新闻弹窗-->
        <el-dialog class="desDialog" :visible.sync="showDes" :show-close="false" v-if="showDes" append-to-body>
            <desDialog @desDialogImp="desDialogImp"></desDialog>
        </el-dialog>

        <parkInfo v-if="showParkInfo" :showType="showParkType" :baseData="showParkList"></parkInfo>
        <!--    党组织架构弹窗-->
        <!--    <el-dialog class="companyDialog" :visible.sync="showCompanyInfo" :show-close="false" v-if="showCompanyInfo"-->
        <!--               append-to-body>-->
        <companyDialog v-if="showCompanyInfo" :companyId="companyId" @close="showCompanyInfo = false"></companyDialog>
        <!--    </el-dialog>-->
        <marqueeView v-if="showMarquee" :val="marqueeText" class="marqueeStyle"></marqueeView>

        <!--    空间测量-->
        <keyTip :tipStr="tipData.showCalTool" v-if="showCalTool"></keyTip>
        <!--    漫游-->
        <keyTip :tipStr="tipData.roam" v-if="showRomaForm"></keyTip>
        <!--    区域-->
        <keyTip :tipStr="tipData.area" v-if="showAreaForm"></keyTip>
        <!--    点位标记-->
        <keyTip :tipStr="tipData.mark" v-if="showMarkForm"></keyTip>

    </div>
</template>

<script>
import mainTitle from "@/components/title";
import ThematicMap from '@/components/ThematicMap';
import singlemonitor from "@/components/singlemonitor"; //监控
import parkInfo from "@/components/parkInfo";//园区企业分分布信息
import companyDialog from "@/views/home/companyDialog";//园区企业分分布信息
import tool from "@/components/tool";
import caltool from "@/components/caltool";
import desDialog from "@/views/home/desDialog";
import { mapGetters, mapState } from "vuex";
import MapContainer from '@/components/MapContainer';
import AreaForm from '@/components/MapContainer/AreaForm.vue';
import MarkForm from '@/components/MapContainer/MarkForm.vue';
import romaForm from '@/components/MapContainer/romaForm.vue';
import marqueeView from '@/components/marqueeView';
import keyTip from '@/components/keyTip.vue';
import detailsPage from "@/components/detailsPage.vue";
import airPop from "@/components/airPop.vue";
import energyPop from "@/components/energyPop.vue";
import {
    getListEnterprise,
    getMarkList, //获取标点列表
} from "@/api/area";

import { sendClearPointMsg, sendEditModeMsg, sendEquipmentInitMsg, sendToUeMsg } from "@/utils/UeMessageUtils";
import {getAnnual} from "@/api/consumption/axios";

export default {
    name: "App",
    components: {
        mainTitle, tool, caltool, desDialog, singlemonitor, parkInfo, companyDialog
        , MapContainer, ThematicMap, AreaForm, MarkForm, romaForm, marqueeView, keyTip,detailsPage,airPop,energyPop
    },
    data() {
        return {
            playerOptions: {
                el: "ws-real-player",
                type: 'real',
                maxNum: 1,
                num: 1,
                showControl: false,
                streamServerIp: "172.22.12.15",
                useNginxProxy: false,
            },
            tipData: {
                'showCalTool': '按1键进行长度测量\n按2键进行面积测量\n按3键进行地表长度测量\n按4键进行地表面积测量'
                , 'roam': '按5键进行漫游路径录制'
                , 'area': '按6键进行区域绘制'
                , 'mark': '按7键进行点位标记'
            },//提示数字

            showMarquee: false,//显示走马灯
            marqueeText: '',
            showCompanyInfo: false,//显示公司信息
            companyId: '',//显示公司id
            showParkInfo: false,//显示园区分布弹窗信息,
            showParkType: '',//显示园区分布弹窗类型,
            showParkList: false,//显示园区分布弹窗列表,
            showMonitor: false,//打开监控,
            sensorMonitor:false, //打开传感器
            electricityMonitor:false,
            meetMonitor:false,
            playMonotorId: '', //监控
            showDes: false,
            panelValue: false,
            panelValue1: false,
            currentPos: -1,
            showBottomPane: true,//展示底部面板
            showTool: true,//展示工具栏
            showCalTool: true,//展示工具栏
            monseIsStart: true,//展示工具栏 初始化
            showLogo: true,
            onlyTools: true,//标题左侧工具栏
            debug: window.config.debug,
            showInviteDialog: false,
            roomUrl: "",
            meet: {
                id: "",
                userName: "",
            },
            userName: "",
            mx: 0,
            my: 0,
            showAreaForm: false,//显示绘制区域
            showRomaForm: false,//显示漫游管理
            showMarkForm: false,//显示标点管理
            videoDeviceTypes: [
                'rcx', //熱成像
                'yy', //鹰眼监控摄像机
                'dlgq', //"道路高清摄像机"
                'lscs', //"雷视测速预警一体机"
                'gq', //高清摄像机
            ],
            //传感器
            sensorData:[
                'kqjc',//空气监测
                'ycjc',//扬尘监测
            ],
            sensorId:'',
            //用电
            electricityData:[
                'yd',//用电
            ],
            electricityId:'',
            //重大危险源
            meetData:[
                'aqyj',//安全应急
            ],
            meetId:'',

        };
    },
    mounted() {
        this.showCalTool = false
        this.$nextTick(() => {
            Object.defineProperty(Event.prototype, "path", {
                get() {
                    return this.composedPath();
                }
            });
        });
        this.$nextTick(() => {
            document.oncontextmenu = function () {
                return false
            }
        })
        document.onkeydown = function (e) {
            undefined
            if (e && e.keyCode === 123) {
                undefined
                e.returnValue = false
                // e.keyCode = 0   //去掉也可以的，倘若要写，则需要setter 以及 getter配合使用，不配合，会报错
                return false
            }
        }
        window.addEventListener("load", () => {
            var boolResult = window.loads() //webrtc
            if (boolResult) {
                this.$message.error('系统自检不通过，请联系开发商！')
            }
            console.log('收到像素流消息----load')
            // this.changeMonitor(true, '1663019388699615233')
            addResponseEventListener("playVideo", data => {
                // console.log('收到像素流消息---start', data)
                if (data.includes("ClickPoint")) {
                    return
                }
                try {
                    data = data.replace(/"/g, '')
                } catch (error) {
                    console.log('weee', error)
                }
                console.log('收到像素流消息---end', data)
                // 点击图层设备 触发
                if (data.includes('PlayVideo')) {
                    const [type, playId = '', deviceType] = data.split(":");

                    // 原来视频设备点击
                    if (type === 'PlayVideo' && playId) {
                        console.log('收到像素流消息 playVideo----load1111', deviceType, data)
                        // 播放视频设备
                        if (this.videoDeviceTypes.includes(deviceType)) {
                            this.changeMonitor(true, playId)
                            console.log()
                        }
                        //传感器
                        else if(this.sensorData.includes(deviceType)){
                            this.changeSensor(true,playId)
                        }
                        //应急
                        else if(this.meetData.includes(deviceType)){
                            this.changeMeet(true,playId)
                        }
                        //能耗
                        else if(this.electricityData.includes(deviceType)){
                            this.changeElectricity(true,playId)
                        }
                        // 其他
                    }
                }


                // console.log("收到像素流消息---> playVideo", data)
                // console.log("收到像素流消息---> playVideo", info)

            })
        })
        // sendInitGameMsg(1)
        this.initState(); //初始化状态
        this.initEvents()
        this.getSituationalHeatMap()
        setTimeout(function () {
            sendClearPointMsg()
            sendEditModeMsg(0); //关闭空间标绘
            sendToUeMsg({'yqzl': 1})
        }, 3 * 1000)
        setTimeout(() => {
            var name = this.$router.currentRoute.name
            if (name.search('monitor') !== -1) {
                this.currentPos = 3
            } else if (name.search('attractinvest') !== -1) {
                this.currentPos = 7
            } else this.currentPos =0
        }, 1 * 1000)
        //企业年度用电量对比
        this.getElectricity()

    },
    methods: {
        ...mapGetters({
            showPane: 'setting/getPane',
            isRoam: 'setting/getRoam',
        }),
        //企业年度用电量对比
        getElectricity() {
            getAnnual()
                .then(res => {
                    console.log(res)
                })
        },
        // 获取初始化数据
        initState() {
            console.log('获取初始化数据')
            setTimeout(() => {

                this.initMarkList(); //获取标点数据
                // this.initModelList(); //获取模型数据
            }, 2000);
        },
        // 获取标点数据
        async initMarkList() {
            const res = await getMarkList();
            console.log('获取标点数据', res.data.data)
            if (res?.data?.data) {
                console.log('获取标点数据', res.data.data)
                let records = res.data.data.records || [];
                records.map(item => {
                    if (item.latitude && item.longitude && item.id) {
                        console.log('发送标点数据', item)
                        let [r, g, b] = item.color.substring(4, item.color.length - 1).split(',');
                        delete item.color;
                        sendEquipmentInitMsg({
                            ...item,
                            r, g, b,
                            eventType: 'addpoint',
                            // imgType: 'mark'
                        })
                    }
                })
            }
        },
        // 获取模型数据
        async initModelList() {
            const res = await getModelList();
            console.log('获取模型数据', res.data.data)
            if (res?.data?.data) {
                console.log('获取模型数据', res.data.data)
                let records = res.data.data.records || [];
                records.map(item => {

                })
            }
        },

        async getSituationalHeatMap() {

            // getListEnterprise()
        },
        initEvents() {
            // this.$mouseTool = new AMap.MouseTool(this.$map);
            this.$event.on('draw::area', () => {
                //显示绘制区域
                this.showAreaForm = true
                this.showRomaForm = false
                this.showMarkForm = false
            });
            this.$event.on('draw::mark', () => {
                //显示绘制区域
                this.showMarkForm = true
                this.showRomaForm = false
                this.showAreaForm = false
            });
            this.$event.on('show::roma', () => {
                //显示漫游管理
                this.showAreaForm = false
                this.showMarkForm = false
                this.showRomaForm = !this.showRomaForm
                if (!this.showRomaForm) {
                    this.showMarquee = false
                }
            });
            this.$event.on('show::marquee', (val) => {
                //显示走马灯
                this.marqueeText = val
                this.showMarquee = true
            });
            this.$event.on('close::marquee', (val) => {
                //显示走马灯
                this.showMarquee = false
            });
            this.$event.on('draw::mark', () => {
            });
            this.$event.on('draw::arrow', () => {
            });
            this.$event.on('draw::clear', () => {
            });
        },

        //园区类别点击
        selectParkImp(value, type, data) {
            console.log('园区类别点击', value, type, data)
            this.showParkInfo = value
            this.showParkType = type
            this.showParkList = data
        },
        // 监控 点击修改
        changeMonitor(boolean, playMonotorId) {
            this.playMonotorId = playMonotorId;
            // console.log("监控", playMonotorId)
            this.showMonitor = boolean
        },
        // 传感器 点击修改
        changeSensor(boolean,sensorId){
            this.sensorId = sensorId;
            console.log("传感器", boolean)
            this.sensorMonitor = boolean
        },
        // 应急 点击修改
        changeMeet(boolean,sensorId){
            this.meetId = sensorId;
            console.log("传感器", boolean)
            this.meetMonitor = boolean
        },
        // 能耗 点击修改
        changeElectricity(boolean,sensorId){
            this.electricityId = sensorId;
            console.log("传感器", boolean)
            this.electricityMonitor = boolean
        },
        showSpatial(flag) {
            console.log("公司信息消息", flag)
            this.companyId = flag
            this.showCompanyInfo = true
        },
        showToolCaltool(bool) {
            this.showCalTool = bool
        },
        panelValueImp() {
            // this.panelValue = new Date()
            this.panelValue = ''
            this.showCalTool = false
            this.showMarkForm = false
            this.showAreaForm = false
        },
        desDialogImp() {
            this.showDes = false
        },
        // 切换显隐设备类型
        changeDeviceTypeStatus(options = {}) {
            // [
            // {type: 'yy', name: '鹰眼监控摄像机'}
            // {type: 'rcx', name: '高点热成像'}
            // {type: 'lscs', name: '雷视测速预警一体机'}
            // {type: 'dlgq', name: '道路高清摄像机'}
            // {type: 'gq', name: '高清摄像机'}
            // {type: 'kqjc', name: '空气检测'}
            // {type: 'ycjc', name: '扬尘检测'}
            // {type: 'yd', name: '用电'}
            // {type: 'aqyj', name: '安全应急'}
            // ]
            const keyTypeConf = {
                2: ['aqyj'], //应急类型
                3: ['yy', 'rcx', 'lscs', 'dlgq', 'gq'], //摄像类型
                4: ['kqjc', 'ycjc'], //传感器
                5: ['yd'], //能耗
            }
            const { showKeys = [], hideKeys = [] } = options;
            showKeys.map(key => {
                let types = keyTypeConf[key] || [];
                types.map(type => sendToUeMsg({ showDeviceType: type }))
            })
            hideKeys.map(key => {
                let types = keyTypeConf[key] || [];
                types.map(type => sendToUeMsg({ hideDeviceType: type }))
            })

        },
        jump(pos) {
            this.onlyTools = true

            // showMarkType hideMarkType 1:企业类型 2:应急类型  3:摄像类型  4:传感器 5：能耗
            switch (pos) {
                case 0: {
                    //综合态势
                    this.$router.replace('/')
                    this.changeDeviceTypeStatus({
                        showKeys: [2, 3, 4, 5],
                        hideKeys: []
                    })
                    break
                }
                case 1: {
                    // 经济运行
                    this.changeDeviceTypeStatus({
                        showKeys: [],
                        hideKeys: [2, 3, 4, 5]
                    })

                    this.$router.replace('/economy')
                    break
                }
                case 2: {
                    // 能耗监测
                    this.changeDeviceTypeStatus({
                        showKeys: [5],
                        hideKeys: [2, 3, 4]
                    })
                    this.$router.replace('/consumption')
                    break
                }
                case 3: {
                    // 环境监测
                    this.changeDeviceTypeStatus({
                        showKeys: [4],
                        hideKeys: [2, 3, 5]
                    })

                    this.$refs.mainTitle.resetSelectType()
                    this.onlyTools = false
                    this.$router.replace({ path: '/monitor' })
                    break
                }
                case 4: {
                    // 安全监管
                    this.changeDeviceTypeStatus({
                        showKeys: [2],
                        hideKeys: [3, 4, 5]
                    })
                    this.$router.replace('/safety')
                    break
                }
                case 5: {
                    // 交通物流
                    this.changeDeviceTypeStatus({
                        showKeys: [3],
                        hideKeys: [2, 4, 5]
                    })
                    this.$router.replace('/traffic')
                    break
                }
                case 6: {
                    this.changeDeviceTypeStatus({
                        showKeys: [],
                        hideKeys: [2, 3, 4, 5]
                    })
                    this.$router.replace('/home')
                    break
                }
                case 7: {
                    this.changeDeviceTypeStatus({
                        showKeys: [],
                        hideKeys: [2, 3, 4, 5]
                    })
                    this.$router.replace({ path: '/attractinvest' })
                    break
                }
            }
            this.currentPos = pos
            let descriptor = {
                gameMode: pos
            }
            window.emitUIInteraction(descriptor);
        },
        //设置按钮
        settingClickImp(bool) {
            // this.panelValue1 = new Date()
            this.panelValue1 = ''
            this.showBottomPane = bool
            this.showCalTool = false
            this.showMarkForm = false
            this.showAreaForm = false
            this.showRomaForm = false
        },
        //工具集结果
        caltoolClickImp(bool) {
            this.showCalTool = bool
        },
        //漫游按钮
        romaClickImp(bool) {
            this.showTool = !bool
        },
        filterEvent(event, callback) {
            // callback(event);
            // return
            //非空白界面 发生鼠标抬起事件通知给UE
            if (event.type == 'mouseup') {
                callback(event);
            } else {
                // let isContainers = false
                // for (let i = 0; i < event.path.length; i++) {
                let className = event.path[0].getAttribute("class") || "";
                // console.log("消息",className)
                if (className == '' || className.indexOf("mainContainer") !== -1 || className.indexOf("floatLeftBg") !== -1) {
                    // isContainers = true
                    // break
                    // }
                    // }
                    // if (isContainers) {
                    callback(event);
                }
            }

        },
        click(event) {
            this.filterEvent(event, (event) => {
                if (window.playerElement) {
                    window.playerElement.click(event);
                }
            });
        },
        onmousemove(event) {
            if (this.showCalTool) {
                this.mx = event.clientX
                this.my = event.clientY
            }
            this.filterEvent(event, (event) => {
                if (window.playerElement) {
                    window.playerElement.onmousemove(event);
                }
            });
        },
        onmousedown(event) {
            console.log(event, "鼠标按下")
            this.filterEvent(event, (event) => {
                if (window.playerElement) {
                    window.playerElement.onmousedown(event);
                }
            });
        },
        onmouseup(event) {
            this.filterEvent(event, (event) => {
                if (window.playerElement) {
                    window.playerElement.onmouseup(event);
                }
            });
        },
        onmousewheel(event) {
            this.filterEvent(event, (event) => {
                if (window.playerElement) {
                    window.playerElement.onmousewheel(event);
                }
            });
        },
        onmouseenter(event) {
            this.filterEvent(event, (event) => {
                if (window.playerElement) {
                    window.playerElement.onmouseenter(event);
                }
            });
        },
        onmouseleave(event) {
            this.filterEvent(event, (event) => {
                if (window.playerElement) {
                    window.playerElement.onmouseleave(event);
                }
            });
        },
    },
    computed: {
        ...mapState(['mapMode']),
    },
    watch: {
        showCalTool(nv) {
            this.monseIsStart = nv
        },
        "$route.path": function (newVal) {
            if (newVal === "/room") {
                this.showLogo = false;
            } else {
                this.showLogo = true;
            }
        },
    },
};
</script>

<style lang="scss">
.companyDialog {
    .el-dialog {
        width: 400px;
        height: 200px;
        background-color: transparent;
        border: 0px solid transparent;
    }

    .el-dialog__header {
        display: none;
    }

    .el-dialog__body {
        padding: 0px;
    }
}

.monitorDialog {
    .el-dialog {
        width: 662px;
        height: 400px;
        background-color: transparent;
        border: 0px solid transparent;
    }

    .el-dialog__header {
        display: none;
    }

    .el-dialog__body {
        padding: 0px;
    }
}

.desDialog {
    .el-dialog {
        width: 662px;
        height: 600px;
        background-color: transparent;
        border: 0px solid transparent;
    }

    .el-dialog__header {
        display: none;
    }

    .el-dialog__body {
        padding: 0px;
    }
}

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.fhide {
    opacity: 0 !important;

    * {
        opacity: 0 !important;
    }

}

.fshow {
    opacity: 1 !important;
}

.shrink:hover {
    cursor: pointer;
}

.centerView {
    position: absolute !important;
    float: left;
    padding-left: 7px;
    left: 50%;
    width: 850px;
    height: 595px;
}

#app {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.logo {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 100;
}

.logo img {
    width: 83px;
    height: 116px;
}

.fullscreen {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-size: cover;
}

.block {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 1000;
}

.topbar1 {
    position: absolute;
    left: 0px;
    right: 0px;
    z-index: 1;
}

.marqueeStyle {
    max-width: 50%;
    min-width: 50%;
    position: absolute;
    bottom: 80px;
    z-index: 4;
    left: 50%;
    transform: translate(-50%);
    color: #FFFFFF;

}

.bottomContainer {
    position: absolute;
    bottom: 0px;
    justify-content: center;
    display: flex;
    flex-direction: row;
    width: 70%;
    margin-left: 15%;
    height: 61px;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_bottom.png");
    z-index: 4;
}

.floatLeftBg {
    left: 0px;
    position: absolute;
    background-image: url("@/assets/main/bg_left.png");
    background-size: 100% 100%;
    width: 300px;
    height: 100vh;
    z-index: -1;
}

.floatRightBg {
    right: 0px;
    position: absolute;
    background-image: url("@/assets/main/bg_right.png");
    background-size: 100% 100%;
    width: 300px;
    height: 100vh;
    z-index: -1;
}

.btn_n {
    cursor: pointer;
    margin-top: 10px;
    width: 72px;
    height: 36px;
    font-size: 11px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    line-height: 36px;
}

.btn_s {
    cursor: pointer;
    width: 72px;
    height: 36px;
    margin-top: 10px;
    font-size: 11px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #17E0F2;
    background-size: 100% 100%;
    text-align: center;
    line-height: 36px;
    background-image: url("@/assets/bg_b_btn.png");
}

// 高德地图容器
.container-amap {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
}
</style>

